import 'package:auto_route/annotations.dart';
import 'package:auto_route/auto_route.dart';
import 'package:base/common/router/app_router.gr.dart';
import 'package:base/common/widgets/swiper_carousel.dart';
import 'package:base/common/widgets/text_layout_widget.dart';
import 'package:base/main.dart';
import 'package:flutter/material.dart';
import 'package:flutter_card_swiper/flutter_card_swiper.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_swiper_null_safety_flutter3/flutter_swiper_null_safety_flutter3.dart';

import '../../common/widgets/custom_carouse_indicator.dart';
import '../../common/widgets/fan_gradient.dart';
import '../../common/widgets/progress_horizontal.dart';
import '../../common/widgets/progress_ring.dart';
import '../../common/widgets/text_controller.dart';
import 'analyse_result.dart';

@RoutePage()
class Tab2Page extends StatefulWidget {
  const Tab2Page({super.key});

  @override
  State<Tab2Page> createState() => _Tab1PageState();
}

class _Tab1PageState extends State<Tab2Page> {
  final text =
      "A little girl strolled through the park, her tiny hand gently holding the leash of a playful puppy. The sun cast a golden glow on the soft grass as the puppy bounced beside her, tail wagging with pure joy. She giggled softly, pausing to let the puppy sniff the wildflowers along the path. With every step, their bond grew stronger, a picture of innocence and friendship in the heart of nature.";
  final TextController _textController = TextController(
    text: "Hello, this is a text layout example with animation!",
    style: TextStyle(fontSize: 20, color: Colors.black, fontWeight: FontWeight.w500, height: 1.2),
    wrapMode: WrapMode.word,
    maxWidth: 1.sw - 32,
  );
  @override
  void initState() {
    super.initState();
    _textController.calculateTextLayout();
  }

  List<Container> cards = [
    Container(
      alignment: Alignment.center,
      child: const Text('1'),
      color: Colors.blue,
    ),
    Container(
      alignment: Alignment.center,
      child: const Text('2'),
      color: Colors.red,
    ),
    Container(
      alignment: Alignment.center,
      child: const Text('3'),
      color: Colors.purple,
    )
  ];
  Key _swiperKey = UniqueKey();
  ValueNotifier<int> currentIndex = ValueNotifier(0);
  SwiperController _swiperController = SwiperController();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(),
        body: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              // Expanded(child: TextLayoutWithAnimation(controller: _textController)),
              Expanded(
                  child: Stack(
                fit: StackFit.expand,
                children: [
                  Swiper(
                    itemBuilder: (context, index) {
                      return Container(
                        alignment: Alignment.center,
                        child: Text(
                          "$index",
                          style: const TextStyle(fontSize: 30),
                        ),
                      );
                    },
                    itemCount: 10,
                    autoplay: true,
                    onIndexChanged: (index) {
                      currentIndex.value = index;
                    },
                    controller: _swiperController,
                  ),
                  Positioned(
                    top: 0,
                    bottom: 0,
                    right: 20,
                    width: 70,
                    child: ValueListenableBuilder(
                        valueListenable: currentIndex,
                        builder: (context, index, _) {
                          return CustomCarouselIndicator(
                            itemCount: 10,
                            currentIndex: index,
                            maxVisibleItems: 5,
                            itemHeight: 60,
                            onItemTap: (tapIndex) {
                              setState(() {
                                currentIndex.value = tapIndex;
                                _swiperController.index = tapIndex;
                              });
                            },
                            itemBuilder: (context, tapIndex) {
                              return ClipRRect(
                                borderRadius: BorderRadius.circular(12),
                                child: Container(
                                  width: 60,
                                  height: 60,
                                  decoration: BoxDecoration(
                                    color: Colors.tealAccent,
                                    borderRadius: BorderRadius.circular(12),
                                    border: Border.all(
                                      color: tapIndex == index ? Colors.blue : Colors.transparent,
                                      width: 2,
                                    ),
                                  ),
                                ),
                              );
                            },
                          );
                        }),
                  ),
                ],
              )),
              SizedBox(height: 20),
              ElevatedButton(
                onPressed: () {
                  Navigator.of(context).push(
                    MaterialPageRoute(
                      builder: (context) => ProgressRingDemo(),
                    ),
                  );
                  // 更新 TextController 的文本内容并重新计算布局
                  // _textController.updateText(text);
                  // _textController.setLineColorWithRange(Range(0, 3), color: Colors.red);
                  // _textController.setLineColorWithRange(Range(6, 30), color: Colors.blue);
                  // _textController.setLineColorWithRange(Range(33, 45), color: Colors.yellow);
                },
                child: Text("Update Text"),
              ),
              ElevatedButton(
                onPressed: () {
                  Navigator.of(context).push(
                    MaterialPageRoute(
                      builder: (context) => ProgressBarExample(),
                    ),
                  );
                  // 更新 TextController 的文本内容并重新计算布局
                  // _textController.updateText(text);
                  // _textController.setLineColorWithRange(Range(0, 3), color: Colors.red);
                  // _textController.setLineColorWithRange(Range(6, 30), color: Colors.blue);
                  // _textController.setLineColorWithRange(Range(33, 45), color: Colors.yellow);
                },
                child: Text("Update Text"),
              ),
              // ElevatedButton(
              //   onPressed: () {
              //     Navigator.of(context).push(
              //       MaterialPageRoute(
              //         builder: (context) => FanGradientDemo(),
              //       ),
              //     );
              //     // 更新 TextController 的文本内容并重新计算布局
              //     // _textController.updateText(text);
              //     // _textController.setLineColorWithRange(Range(0, 3), color: Colors.red);
              //     // _textController.setLineColorWithRange(Range(6, 30), color: Colors.blue);
              //     // _textController.setLineColorWithRange(Range(33, 45), color: Colors.yellow);
              //   },
              //   child: Text("渐变圆弧"),
              // ),
              ElevatedButton(
                onPressed: () {
                  Navigator.of(context).push(
                    MaterialPageRoute(
                      builder: (context) => const AnalyseResultPage(),
                    ),
                  );
                  // 更新 TextController 的文本内容并重新计算布局
                  // _textController.updateText(text);
                  // _textController.setLineColorWithRange(Range(0, 3), color: Colors.red);
                  // _textController.setLineColorWithRange(Range(6, 30), color: Colors.blue);
                  // _textController.setLineColorWithRange(Range(33, 45), color: Colors.yellow);
                },
                child: Text("分析结果"),
              ),
            ],
          ),
        ));
  }

  @override
  void dispose() {
    print("Tab2Page dispose");
    currentIndex.dispose();
    _swiperController.dispose();
    super.dispose();
  }
}
